import React from 'react';//核心库
import ReactDOM from 'react-dom';//DOM渲染库
import PropTypes from 'prop-types';
/**
 * 如何 对属性进行类型校验
 * 组件封装好是给别人用的。
 */
class Person extends React.Component {
  static defaultProps = {
    name: '默认名称'
  }
  static propTypes = {
    name: PropTypes.string.isRequired,//name是一个字符串类型的必填字段
    gender: PropTypes.oneOf(['male', 'female']),//枚举值 或者 是male或者 是female
    hobby: PropTypes.arrayOf(PropTypes.string),//字符串的数组
    position: PropTypes.shape({ //position的值是一个对象 key  x y 值是number
      x: PropTypes.number,
      y: PropTypes.number
    }),
    //属性对象  属性名称  组件的名称   age是设置了一个函数，这是一自定义的校验器
    age(props, propName, componentName) {
      let age = props[propName];
      if (age < 0 || age > 120) {
        throw new Error(`Invalid prop ${propName} of value ${age} supplied to ${componentName}, expected age between 0 and 120.`)
      }
    }
  }
  render() {
    let { name, age, gender, hobby, position, friends } = this.props;
    return (
      <table>
        <thead>
          <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>爱好</td>
            <td>位置</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{name}</td>
            <td>{age}</td>
            <td>{gender}</td>
            <td>{hobby.join(',')}</td>
            <td>{`x:${position.x},y:${position.y}`}</td>
          </tr>
        </tbody>
      </table>
    )
  }
}
//先创建一个props对象
/**
 * Objects are not valid as a React child 
 * (found: object with keys {x, y}). 
 * If you meant to render a collection of children, use an array instead.
 */
let props = {
  name: 'zhufeng',
  age: 80,//>=0 <=120
  gender: 'male',
  hobby: ['smoking', 'drinking'],
  position: { x: 10, y: 10 },
  friends: [
    { name: '张三', age: 10 },
    { name: '李四', age: 10 }
  ]
}
//let element = <Person {...props} />
//1.拿 到props
let componentInstance = new Person(props);
let propTypes = Person.propTypes;
if (propTypes.name == PropTypes.string.isRequired) {
  if (!props.name) {
    throw new Error('属性名name必须提供，但你没有提供 ，报错');
  }
}

ReactDOM.render(element, document.getElementById('root'));
/**
 * 为什么 类型检查为什么是静态属性啊
 *什么是时候静态
 什么时候用动态
 有些需要动态和静态都可以，那你会用哪个？
如果能用类的静态属实现，就不要用实例属性
1.使用方便 Person.propTypes
2.只会有一份，节约内存  实例 属性，每new 一个实例 ，都 要创建一份。但是静态永久只有一份
能共用就共用，节约资源，不能共用才需每个一份

 */